<template>
	<view class="history">
		<view class="header">
			<image
				style="opacity: 0.9;"
				src="../../images/6.png
"
				mode=""
			></image>
			<view class="like">
				<view class="na">RECHER</view>
				<view class="" style="color: #bec0c1;font-size: 28rpx;">林中鸟是我最喜欢的收藏之一</view>
			</view>
		</view>
		<view class="content">
			<view class="" style="width: 750rpx;height: 80rpx;line-height: 80rpx;padding: 0 30rpx 0;color: #a3a5a7;font-weight: 600; ">当前浏览</view>
			<view class="potext" v-for="item in items" :key="item">
				<navigator url=""></navigator>
				<image :src="item.img" mode=""></image>
				<view class="compo">
					<view class="na" style="padding:10rpx 0;">
						RECHER by
						<text class="" style="color: #5e76f7;">{{ item.name }}</text>
					</view>
					<view class="" style="color: #bec0c1;font-size: 28rpx;">{{ item.data }}</view>
				</view>
				<view class="">{{ item.money }}ETH</view>
			</view>
			<button @click="buy" style="border-radius: 50rpx;background-color: #556ff7;color: #ffffff;margin: 0 30rpx;">出价</button>
		</view>
		<!-- 红包1 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: [
				{ img: '../../images/5.png', name: 'Komu', data: '2022-2-23 10:20:23', moeny: '2.3' },
				{ img: '../../images/4.png', name: 'Komu', data: '2022-2-23 10:20:23', moeny: '2.3' },
				{ img: '../../images/7.png', name: 'Komu', data: '2022-2-23 10:20:23', moeny: '21' },

				{ img: '../../images/7.png', name: 'Komu', data: '2022-2-23 10:20:23', moeny: '21' },
				{ img: '../../images/7.png', name: 'Komu', data: '2022-2-23 10:20:23', moeny: '21' }
			]
		};
	}
};
</script>
<style lang="scss">
.history {
	width: 750rpx;
	height: 100%;
	.header {
		width: 750rpx;
		padding: 30rpx;
		display: flex;

		image {
			width: 250rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}
		.like {
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			padding: 0 30rpx;

			.na {
				margin: 40rpx 0;
				text {
					color: #5e76f7;
				}
			}
		}
	}
	.content {
		width: 750rpx;
		height: 100rpx;
		.potext {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			border: 1px solid #dadcdc;
			margin: 30rpx;
			border-radius: 10rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				margin: 0 20rpx;
			}
		}
		.compo {
			padding: 40rpx;
		}
	}
	.bom {
		width: 200rpx;
		height: 60rpx;
	}
}
</style>
